<template>
  <div class="guide">
    <div class="guide_content flex-between-center flex-column">
      <div class="page_top">
        <!-- 头部 -->
        <div class="head flex-start-center">
          <img src="@/assets/images/logo.png" alt="logo" />
          <i />
          <span>注册引导</span>
        </div>
        <!-- 步骤条 -->
        <a-steps :current="step_active">
          <a-step :title="$t('register.information')" />
          <a-step :title="$t('register.choice')" />
          <a-step :title="$t('register.my_complete')" />
        </a-steps>
        <a-skeleton v-if="step_active === -1" />
        <div class="contents">
          <div v-if="step_active === 0" class="basic">
            <a-form
              :form="form"
              class="register-form"
              @submit.prevent="handleSubmit(0)"
            >
              <a-form-item>
                <p class="desc">
                  {{ $t('register.nickname_tit') }}
                </p>
                <a-input
                  v-decorator="[
                    'nickname',
                    {
                      rules: [
                        {
                          required: true,
                          message: () => {
                            return (
                              $t('register.please') + $t('register.nickname')
                            )
                          }
                        }
                      ]
                    }
                  ]"
                  :placeholder="$t('register.please')"
                />
              </a-form-item>
              <a-form-item>
                <p class="desc">
                  {{ $t('register.sign') }}
                </p>
                <a-cascader
                  v-decorator="[
                    'region',
                    {
                      rules: [
                        {
                          required: true,
                          message: () => {
                            return $t('register.select_region')
                          }
                        }
                      ]
                    }
                  ]"
                  :options="area"
                  :placeholder="$t('register.select_region')"
                  @change="select_address_md"
                />
              </a-form-item>
              <a-form-item>
                <my-map
                  v-if="isMap"
                  ref="map"
                  :lng.sync="lng"
                  :lat.sync="lat"
                  :address="address"
                ></my-map>
              </a-form-item>
              <div class="flex-center-center">
                <a-button
                  type="primary"
                  html-type="submit"
                  :loading="loading"
                  class="register-form-button"
                  style="margin-right:60px;"
                >
                  {{ $t('register.down_step') }}
                </a-button>
                <a-button
                  type="primary"
                  ghost
                  :loading="loading1_2"
                  class="register-form-button"
                  @click.prevent="handleSubmit(1)"
                >
                  {{ $t('register.skip') }}
                </a-button>
              </div>
            </a-form>
          </div>
          <div
            v-if="step_active === 1"
            class=" individualization flex-center-center "
          >
            <div class="raidos">
              <p>{{ $t('register.problem1') }}</p>
              <a-radio-group
                v-model="personality_value_one"
                :options="personality_options"
              />
              <p>{{ $t('register.problem2') }}</p>
              <a-radio-group
                v-model="personality_value_two"
                :options="personality_options"
              />
              <p>{{ $t('register.problem3') }}</p>
              <a-radio-group
                v-model="personality_value_three"
                :options="personality_options"
              />
            </div>
            <div class="flex-center-center btns">
              <a-button
                type="primary"
                html-type="submit"
                class="register-form-button"
                style="margin-right:60px;"
                @click="addRegisterTwo(1)"
              >
                {{ $t('register.down_step') }}
              </a-button>
              <a-button
                type="primary"
                ghost
                class="register-form-button"
                @click="addRegisterTwo(0)"
              >
                {{ $t('register.skip') }}
              </a-button>
            </div>
          </div>
          <div v-if="step_active === 2" class="complete">
            <a-skeleton :loading="applyLoading"> </a-skeleton>
            <div v-show="!applyLoading">
              <div class="applys flex-center-start">
                <div v-if="open_applys_list.length" class="opening">
                  <p>{{ $t('register.open_apply') }}</p>
                  <a-checkbox
                    v-for="(item, index) in open_applys_list"
                    :key="index"
                    :default-checked="item.isSelect"
                    :disabled="item.must_open"
                    @change="checkbox_change(item, index, 1)"
                  >
                    {{ item.name }}
                    <a-tooltip>
                      <template slot="title">
                        {{ item.des || '暂无' }}
                      </template>
                      <i class="iconfont iconprompt" />
                    </a-tooltip>
                    <span class="price">
                      {{ item.price }}
                    </span>
                  </a-checkbox>
                </div>
                <div v-if="recommend_applys_list.length" class="recommend">
                  <p>{{ $t('register.recommend_apply') }}</p>
                  <a-checkbox
                    v-for="(item, index) in recommend_applys_list"
                    :key="index"
                    :default-checked="item.isSelect"
                    :disabled="item.must_open"
                    @change="checkbox_change(item, index, 2)"
                  >
                    {{ item.name }}
                    <a-tooltip>
                      <template slot="title">
                        {{ item.des || '暂无' }}
                      </template>
                      <i class="iconfont iconprompt" />
                    </a-tooltip>
                    <span class="price">{{ item.price }}</span>
                  </a-checkbox>
                </div>
              </div>
              <p class="total">
                {{ $t('register.total') }}
                {{ total }}
                {{ $t('register.year') }}
              </p>
              <div class="flex-center-center btns">
                <a-popconfirm
                  :title="$t('register.confirm_trial')"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="toPay(1)"
                >
                  <a-button
                    type="primary"
                    html-type="submit"
                    class="register-form-button"
                    style="margin-right:60px;"
                  >
                    {{ $t('register.on_trial') }}
                  </a-button>
                </a-popconfirm>
                <a-button
                  type="primary"
                  ghost
                  class="register-form-button"
                  @click="toPay(0)"
                >
                  {{ $t('register.Opening') }}
                </a-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 脚步 -->
      <div class="foot">
        2018-2020 河南纸片云科技有限公司 版权所有 网站备案号：豫ICP备17023920号
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// eslint-disable-next-line no-unused-vars
import area from '@/const/area-min.js'
import { cityLngLat } from '@/const/city-lng-lat.js'
import MyMap from './map'
export default {
  components: { MyMap },
  data() {
    return {
      isMap: true,
      address: '',
      applyLoading: true, // 应用列表是否加载完成
      area,
      step_active: -1, // 0 1 2
      loading1_2: false,
      loading: false,
      // map 地图
      lng: 0,
      lat: 0,
      // 个性选择
      personality_options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 }
      ],
      getStepInfo: null,
      personality_value_one: 1,
      personality_value_two: 1,
      personality_value_three: 1,
      open_applys_list: [], // 应用列表
      recommend_applys_list: [], // 推荐列表
      select_address_code: [] // 地址id列表
    }
  },
  computed: {
    ...mapState(['user']),
    total() {
      let sum = 0
      this.open_applys_list.map(val => {
        if (val.isSelect) {
          sum += val.price - 0
        }
      })
      this.recommend_applys_list.map(val => {
        if (val.isSelect) sum += val.price - 0
      })
      return sum.toFixed(2)
    }
  },
  beforeCreate() {
    // 基本信息实例
    this.form = this.$form.createForm(this, { name: 'normal_guide' })
  },
  created() {
    this.getStep()
  },
  methods: {
    // 提交选择
    async addRegisterTwo(is_jump) {
      const { code, msg } = await this.$api.user.addRegisterTwo({
        is_jump,
        select_info: [
          this.personality_value_one,
          this.personality_value_two,
          this.personality_value_three
        ]
      })

      if (code === 1) {
        this.$notification.success({ message: msg })
        this.step_active++
        this.getStep()
      }
    },
    // 获取到执行到那里了
    async getStep() {
      const { data, code } = await this.$api.user.getAppRegisterStepInfo()
      this.getStepInfo = data
      if (code === 1) {
        if (!data.register_step_one) {
          this.step_active = 0
        } else if (!data.register_step_two) {
          const dat = JSON.parse(data.register_step_two)
          this.personality_value_one = dat[0] - 0
          this.personality_value_two = dat[1] - 0
          this.personality_value_three = dat[2] - 0
          this.step_active = 1
        } else if (!data.register_step_three) {
          const dat = JSON.parse(data.register_step_two)
          this.personality_value_one = dat[0] - 0
          this.personality_value_two = dat[1] - 0
          this.personality_value_three = dat[2] - 0
          // const list = []
          // if (dat[0] === '0') list.push(7)
          // if (dat[1] === '0') list.push(23)
          // if (dat[2] === '0') list.push(8)
          // if (
          //   this.open_applys_list.length ||
          //   this.recommend_applys_list.length
          // ) {
          //   list.map(v => {
          //     const item = this.open_applys_list.find((it, i) => {
          //       if (it.id === v) {
          //         this.open_applys_list.splice(i, 1)
          //         return it
          //       }
          //     })
          //     if (item) this.recommend_applys_list.push(item)
          //   })
          // }
          this.step_active = 2
          // 获取基本应用列表
          this.init()
        } else {
          this.$router.replace('/application/confirmPay')
        }
      }
    },
    checkbox_change(item, index, type) {
      if (item) {
        if (type === 1) {
          this.open_applys_list[index].isSelect = !this.open_applys_list[index]
            .isSelect
        } else {
          this.recommend_applys_list[index].isSelect = !this
            .recommend_applys_list[index].isSelect
        }
      }
    },
    // 获取开通的应用并组装数据
    getActiveApply(isTest = 1) {
      const applyList = []
      const idList = []
      const is_test = isTest
      if (
        Array.isArray(this.open_applys_list) &&
        Array.isArray(this.recommend_applys_list)
      ) {
        const list = [...this.open_applys_list, ...this.recommend_applys_list]
        list.map(v => {
          if (v.isSelect) {
            applyList.push({ ...v, is_test })
            idList.push({
              application_id: v.id,
              is_test
            })
          }
        })
      }
      return { applyList, idList }
    },
    // 去确认订单页面
    async toPay(isTist) {
      // eslint-disable-next-line no-unused-vars
      const { applyList, idList } = this.getActiveApply(isTist)
      console.warn('applyList', applyList)
      if (applyList.length) {
        // 保存第三步数据
        const { code, msg } = await this.$api.application.addRegisterThree({
          application: idList
        })
        if (code === 1) {
          sessionStorage.setItem('applyList', JSON.stringify(applyList))
          this.$router.replace('/application/confirmPay')
          this.$notification.success({ message: msg })
        }
      } else {
        this.$notification.error({
          message: '请选择应用后，再进行' + (isTist ? '试用' : '开通')
        })
      }
    },
    // 获取应用列表
    async init() {
      try {
        const { data, code } = await this.$api.user.getApplyList({
          current_page: 1,
          page_number: 200
        })
        if (code === 1) {
          this.applyLoading = false
          data.records.map(val => {
            if (val && val.constructor === Object) {
              const TEMP = {}
              if (
                Array.isArray(val.application_price_info) &&
                val.application_price_info.length
              ) {
                TEMP.price = val.application_price_info[0].price
                TEMP.originalPrice = val.price
              } else {
                TEMP.price = val.price
                TEMP.originalPrice = val.price
              }
              TEMP.name = val.name
              TEMP.isSelect = true
              TEMP.id = val.application_id
              if (TEMP.id === 6 || TEMP.id === 9 || TEMP.id === 10) {
                this.recommend_applys_list.push(TEMP)
              } else if (
                TEMP.id === 26 ||
                TEMP.id === 19 ||
                TEMP.id === 20 ||
                TEMP.id === 28 ||
                TEMP.id === 27
              ) {
                this.open_applys_list.push(TEMP)
              } else if (TEMP.id === 7) {
                if (this.personality_value_one) {
                  this.open_applys_list.push(TEMP)
                } else {
                  this.recommend_applys_list.push(TEMP)
                }
              } else if (TEMP.id === 8) {
                if (this.personality_value_two) {
                  this.open_applys_list.push(TEMP)
                } else {
                  this.recommend_applys_list.push(TEMP)
                }
              } else if (TEMP.id === 23) {
                if (this.personality_value_three) {
                  this.open_applys_list.push(TEMP)
                } else {
                  this.recommend_applys_list.push(TEMP)
                }
              }
            }
          })
        }
      } catch (error) {}
    },
    // 选择地址
    select_address_md(val, info) {
      this.select_address_code = val
      const city =
        info[1].label === '市辖区' || info[1].label === '县'
          ? info[0].label
          : info[1].label
      const item = cityLngLat.find(v => city.indexOf(v.label) > -1)
      this.$refs.map.onSearchResult([{ lng: item.lng, lat: item.lat }])
      this.$refs.map.searchOption.city = city
      this.$refs.map.searchOption.zooms = [10, 19]
    },
    // 提交首个表单
    handleSubmit(is_jump) {
      if (is_jump) {
        this.loading1_2 = true
        this.firstSubmit({ is_jump: is_jump })
      } else {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.loading = true
            this.firstSubmit({
              title: values.nickname,
              province_id: this.select_address_code[0],
              city_id: this.select_address_code[1],
              district_id: this.select_address_code[2],
              location_detail: values.verificationCode,
              longitude: this.lng,
              latitude: this.lat,
              is_jump
            })
          }
        })
      }
    },
    async firstSubmit(query) {
      console.warn('q', query)
      const { msg, code } = await this.$api.user.addappinfo(query)
      if (code === -2) {
        this.$notification.error({
          message: msg
        })
      } else {
        this.$notification.success({
          message: msg
        })
        this.step_active++
      }
      this.loading1_2 = false
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.guide {
  .guide_content {
    width: 1100px;
    min-height: 100vh;
    padding: 31px 0 1px;
    font-family: FZLanTingHei-R-GBK;
    font-weight: 400;
    margin: 0 auto;
    align-items: stretch;
    color: #343434;
    .page_top {
      .head {
        width: 100%;
        margin-bottom: 60px;
        img {
          width: 140px;
          height: 61px;
        }
        i {
          display: block;
          width: 2px;
          height: 54px;
          background: #c6c6c6;
          margin: 0 20px 0 30px;
        }
        span {
          font-size: 26px;
          color: #3d363b;
        }
      }
      /deep/ .ant-steps {
        width: 750px;
        margin: 0 auto 70px;
      }
      .contents {
        width: 750px;
        margin: 0 auto;
        .basic {
          width: 420px;
          margin: 0 auto;
        }
      }
    }

    .foot {
      font-size: 12px;
      line-height: 1;
      color: #9a9a9a;
      text-align: center;
      margin: 20px 0;
    }
    .map {
      width: 600px;
      height: 400px;
      position: absolute;
      top: 0;
      left: 50%;
      margin: 30px 0;
      z-index: 99;
      transform: translateX(-50%);
      background-color: skyblue;
    }
    .map_rul_msg {
      color: red;
      position: absolute;
      white-space: nowrap;
      margin-left: 30px;
    }
    // 个性化设置
    .individualization {
      flex-wrap: wrap;
      p {
        font-size: 16px;
        color: #343434;
        margin: 50px 0 25px;
        &:first-of-type {
          margin: 0 0 25px;
        }
      }
      /deep/ .ant-radio-group {
        padding-left: 20px;
      }
      /deep/ .ant-radio-wrapper {
        margin-right: 80px;
      }
      .btns {
        width: 100%;
        margin-top: 90px;
      }
    }
    // 完成
    .complete {
      font-size: 14px;
      .opening {
        margin-right: 115px;
      }
      p {
        font-size: 16px;
        color: #343434;
        margin-bottom: 20px;
      }
      .iconprompt {
        font-size: 20px;
        margin-bottom: -3px;
      }
      .price {
        color: #f22424;
      }
      /deep/ .ant-checkbox-wrapper {
        display: block;
        margin-left: 0 !important;
      }
      .applys {
        padding-bottom: 60px;
        border-bottom: 2px solid #eee;
      }
      .total {
        margin: 20px 0 75px;
      }
    }
  }
}
/deep/ .ant-modal {
  width: 648px !important;
}
/deep/ .ant-modal-body {
  height: 400px;
  .map {
    width: 600px;
    height: 354px;
    background-color: skyblue;
  }
}
</style>
